<template>
  <div class="header">
    <div class="inner-header flex">
      <svg
        version="1.1"
        class="logo"
        baseProfile="tiny"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 500 500"
        xml:space="preserve"
      >
        <path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M57,283" />
        <g>
          <path
            fill="#fff"
            d="M250.4,0.8C112.7,0.8,1,112.4,1,250.2c0,137.7,111.7,249.4,249.4,249.4c137.7,0,249.4-111.7,249.4-249.4
              C499.8,112.4,388.1,0.8,250.4,0.8z M383.8,326.3c-62,0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4,13.2-104.1
              c-22.4,3-38.4,9.2-47.8,18.3c-11.2,10.9-13.6,26.7-16.3,45c-3.1,20.8-6.6,44.4-25.3,62.4c-19.8,19.1-51.6,26.9-100.2,24.6l1.8-39.7		c35.9,1.6,59.7-2.9,70.8-13.6c8.9-8.6,11.1-22.9,13.5-39.6c6.3-42,14.8-99.4,141.4-99.4h41L333,166c-12.6,16-45.4,68.2-31.2,96.2	c9.2,18.3,41.5,25.6,91.2,24.2l1.1,39.8C390.5,326.2,387.1,326.3,383.8,326.3z"
          />
        </g>
      </svg>
      <h1>博客后台管理</h1>
      <div style="margin-top: 30px">
        <el-form :model="userInfo" :rules="rules" ref="login" label-width="0px" class="ms-content">
          <el-form-item prop="user_email">
            <el-input v-model="userInfo.user_email" placeholder="email">
              <template #prepend>
                <el-button :icon="User"></el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="user_password">
            <el-input type="password" placeholder="password" v-model="userInfo.user_password" @keyup.enter="submitForm(login)">
              <template #prepend>
                <el-button :icon="Lock"></el-button>
              </template>
            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm(login)" v-preventReClick>登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div>
      <svg
        class="waves"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28"
        preserveAspectRatio="none"
        shape-rendering="auto"
      >
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
  </div>
  <div class="content flex">
    <p class="login-tips">Tips : 邮箱和密码与博客前台保持一致~</p>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { useTagsStore } from '@/store/tags'
  import { usePermissStore } from '@/store/permiss'
  import { useRouter } from 'vue-router'
  import type { FormInstance, FormRules } from 'element-plus'
  import { Lock, User } from '@element-plus/icons-vue'
  import { loginRequest } from '@/network/api/user-api'
  import useUserStore from '@/store/user'
  import useSidebarStore from '@/store/sidebar'
  import { sessionCache } from '@/utils/cache'
  import Notification from '@/utils/notification'
  interface LoginInfo {
    user_email: string
    user_password: string
  }

  const router = useRouter()
  const userInfo = reactive<LoginInfo>({
    user_email: 'wangzekai',
    user_password: '',
  })

  const rules: FormRules = {
    user_email: [
      {
        required: true,
        message: '邮箱不能为空~',
        trigger: 'blur',
      },
    ],
    user_password: [{ required: true, message: '密码不能为空~', trigger: 'blur' }],
  }
  const permiss = usePermissStore()
  const sidebarStore = useSidebarStore()
  const login = ref<FormInstance>()
  const userStore = useUserStore()
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid: boolean) => {
      if (valid) {
        const result = await loginRequest(userInfo)
        if (result.status === 200) {
          // 保存用户信息到Pinia和sessionStorage
          userStore.userInfo = result.result
          const roleMenu = <any>[]
          result.result.rights.forEach((item: any) => {
            roleMenu.push(item.name)
          })
          sidebarStore.updateMenu(result.result.menu)
          sessionCache.setCache('roleMenu', roleMenu)
          sessionCache.setCache('userInfo', result.result)
          sessionCache.setCache('avatar', result.result.avatar_url)
          sessionCache.setCache('nickname', result.result.user_nickname)
          userStore.changeAvatar(result.result.avatar_url)
          userStore.changeNickname(result.result.user_nickname)
          Notification.success(result.msg)
          router.push('/home')
        }
        // localStorage.setItem('ms_user_email', userInfo.user_email)
        // const keys = permiss.defaultList[userInfo.user_email == 'admin' ? 'admin' : 'user']
        // permiss.handleSet(keys)
        // localStorage.setItem('ms_keys', JSON.stringify(keys))
      } else {
        Notification.warning('邮箱或者密码不能为空！')
        return false
      }
    })
  }

  const tags = useTagsStore()
  tags.clearTags()
</script>

<style scoped>
  @import url(//fonts.googleapis.com/css?family=Lato:300:400);

  h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 48px;
  }

  p {
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    color: #333333;
  }

  .header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
    color: white;
  }

  .logo {
    width: 50px;
    fill: white;
    padding-right: 15px;
    display: inline-block;
    vertical-align: middle;
  }

  .inner-header {
    height: 65vh;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .flex {
    /*Flexbox for containers*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
  }

  .content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
  }

  /* Animation */

  .parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  }

  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }

  .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }

  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }

  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }

  @keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }

    100% {
      transform: translate3d(85px, 0, 0);
    }
  }

  /*Shrinking for mobile*/
  @media (max-width: 768px) {
    .waves {
      height: 40px;
      min-height: 40px;
    }

    .content {
      height: 30vh;
    }

    h1 {
      font-size: 24px;
    }
  }
</style>
